<template>
  <div class="tab-title-page goods_list">
    <el-tabs v-model="activeName" class="flex-1 nav_tabs" @tab-click="handleClick">
      <el-tab-pane :label="`已上架盲盒`" name="1" />
      <el-tab-pane :label="`已下架盲盒`" name="2" />
    </el-tabs>
    <el-divider class="middle_divider" />
    <div class="child_page">
      <div class="common_form_search">
        <el-form ref="searchForm" :inline="true" :model="searchForm">
          <el-form-item label="商品ID">
            <el-input v-model="searchForm.goods_id" placeholder="请输入商品ID" clearable />
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="searchForm.goods_name" placeholder="请输入商品名称" clearable />
          </el-form-item>
          <el-form-item label="创建时间">
            <my-date-picker ref="myDatePicker" />
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search()">查询</el-button>
            <el-button size="small" @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-divider />
      <div style="padding:0 30px">
        <div class="flex align-center table-top-btns">
          <h5 class="flex align-center">
            <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
          </h5>
          <el-button type="success" size="mini" @click="handleBlind">添加盲盒</el-button>
        </div>
        <el-table :data="tableData" border row-key="id" :tree-props="{ children: 'children' }">
          <el-table-column align="center" label="展开">
          </el-table-column>
          <el-table-column align="center" prop="id" label="盲盒id" show-overflow-tooltip="true" />
          <el-table-column align="center" label="盲盒名称" prop="title" show-overflow-tooltip="true" />
          <el-table-column align="center" label="商品名称" prop="goods_title" show-overflow-tooltip="true" />
          <el-table-column align="center" label="商品类型" prop="meal_name" show-overflow-tooltip="true" />
          <el-table-column align="center" label="盲盒图片">
            <template slot-scope="scope">
              <div v-if="scope.row.children" class="goods_info">
                <el-image style="width: 30px; height: 30px" :src="$globalObj.imgBaseUrl + scope.row.img">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品图片">
            <template slot-scope="scope">
              <div v-if="!scope.row.children" class="goods_info">
                <el-image style="width: 30px; height: 30px" :src="$globalObj.imgBaseUrl + scope.row.goods_img">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="price" label="售价" show-overflow-tooltip="true" />
          <el-table-column align="center" prop="goods_price" label="商品售价" />
          <el-table-column align="center" label="销量" prop="sell_num" />
          <el-table-column align="center" prop="create_time" label="创建时间" width="180" />
          <el-table-column align="center" label="状态" prop="status" />
          <el-table-column fixed="right" align="center" label="操作" width="340">
            <template slot-scope="scope">
              <el-button v-if="scope.row.children" type="warning" size="mini"
                @click="changeStatus(scope.row.id, scope.row.status)">{{
                  scope.row.status == '上架' ? '下架' : '上架' }}
              </el-button>
              <el-button v-if="scope.row.children" type="primary" size="mini"
                @click="handleEidt(scope.row)">编辑商品</el-button>
              <el-button v-if="scope.row.status == '上架'" type="success" size="mini"
                @click="handleGoods(scope.row.id)">添加商品</el-button>
              <el-button type="danger" size="mini" @click="handleDel(scope.row, scope.row.id)">删除</el-button>
							<el-button v-if="scope.row.children" type="success" size="mini" @click="handleShare(scope.row.id)">分享</el-button>
            </template>
          </el-table-column>
        </el-table>
        <custom-page ref="customPage" :total="total" @getList="getList" />
        <set-blind ref="setBlind" :edit-item="editItem" @getList="getList"></set-blind>
        <add-goods ref="addGoods" :box-id="boxId" @getList="getList"></add-goods>
				<share-dialog ref="shareDialog" :box-id="boxId"  @getList="getList"></share-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import myDatePicker from '@/components/myDatePicker'
import setBlind from './child/setBlind'
import addGoods from './child/addGoods'
import shareDialog from './components/shareDialog'
import { getCategory, getBoxList, updateBoxDown, updateBoxUp, getBoxListDown, delBoxGoods,deleteBox } from '@/api/audit'
export default {
  components: { myDatePicker, setBlind, addGoods,shareDialog },
  data() {
    return {
      searchForm: {
        goods_id: '',
        goods_name: '',
        shop_name: '',
        cate_id: '',
        rent_type: '',
        create_time: ''
      },
      activeName: '1',
      total: 0,
      tableData: [],
      categoryList: [],
      goodsList: {},
      boxId: '',
      editItem: {}
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 编辑盲盒
    handleEidt(item) {
      this.editItem = item
      this.$refs.setBlind.dialogVisible = true
      this.$refs.setBlind.title = '编辑盲盒'
    },
    // 添加商品
    handleGoods(id) {
      this.editItem = {}
      this.boxId = id
      this.$refs.addGoods.dialogVisible = true
    },
		handleShare(id){
			this.boxId = id
			this.$refs.shareDialog.dialogVisible = true
		},
    // 删除商品
    handleDel(item, id) {
      this.$confirm('您确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        if(item.children){
          // 存在children,删除盲盒
          if (item.children.length != 0) {
          this.$message({
            message: '存在相关子列表，请勿删除',
            type: 'error'
          })
        } else {
          deleteBox(id).then(res => {
              this.$message({
                message: '删除成功！',
                type: 'success'
              })
              this.getList()
              this.activeName = '1'
            })
        }
        }else{
          // 否则删除商品
          delBoxGoods(id).then(res => {
              this.$message({
                message: '删除成功！',
                type: 'success'
              })
              this.getList()
            })
        }
        
      }).catch(() => { })

    },
    handleBlind() {
      this.$refs.setBlind.dialogVisible = true
      this.$refs.setBlind.title = '添加盲盒'
    },
    // 上架/下架
    changeStatus(id, status) {
      if (status === '上架') {
        // 下架
        this.$confirm('您确定要下架盲盒吗？', '下架', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          updateBoxDown(id).then(res => {
            this.getOffList(true)
            this.activeName = '2'
          })
        }).catch(() => { })
      } else {
        // 上架
        this.$confirm('您确定要上架盲盒吗？', '上架', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          updateBoxUp(id).then(res => {
            this.getList(true)
            this.activeName = '1'
          })
        }).catch(() => { })
      }
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.searchForm.create_time = pickerVal
        this.$refs.customPage.page = 1
        this.getList()
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.searchForm = {
        goods_id: '',
        goods_name: '',
        shop_name: '',
        cate_id: '',
        rent_type: '',
        create_time: ''
      }
      this.getList()
    },
    handleClick(tab) {
      this.activeName = tab.name
      if (tab.name == 1) {
        this.getList()
      } else if (tab.name == 2) {
        this.getOffList()
      }
    },
    getOffList(flag) {
      if (!flag) {
        this.tableData = []
      }
      getBoxListDown({
        boxCreateTime: '',
        title: '',
        id: ''
      }).then(res => {
        this.tableData = res || []
      })
    },
    // 获取数据
    getList(flag) {
      if (!flag) {
        this.tableData = []
      }
      getBoxList({
        boxCreateTime: '',
        title: '',
        id: ''
      }).then(res => {
        this.tableData = res || []
      })
    },
    getSelectList() {
      getCategory().then(res => {
        this.categoryList = res || []
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getList(true)
    })
  }
}
</script>
<style lang="scss" scoped>
.common_form_search {
  padding: 15px 30px 0;
}

.child_page {
  padding-bottom: 15px;
}

.goods_info {
  .info {
    // margin-left: 10px;

    p {
      color: #666666;
    }

    p:first-child {
      color: #999999;
    }
  }
}

.activity {
  line-height: 24px;

  span {
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }
}
</style>
